<!-- -->
<template>
  <div class="login">
    <div class="head">
      <div class="head-title">
        <van-icon name="arrow-left" class="head-back" @click="router.replace('/home')"/>
        <div class="head-number">{{ $t("login.title") }}</div>
      </div>

      <img src="@/assets/images/login/logo.png" alt="" class="head-logo" />
      <div>Palmfun</div>
    </div>
    <div class="bodyCard">
      <div class="text">{{ t("login.passlogin") }}</div>
      <van-form @submit="onSubmit" ref="fromRef">
        <van-cell-group :border="false">
          <div class="bodyCard-label">{{ t("login.emailCode") }}</div>
          <van-field
            :border="false"
            v-model="data.email"
            name="email"
            class="dev-field"
            :placeholder="$t('login.emailmsg')"
            :rules="[
              { required: true, validator, message: $t('login.emerrmsg') },
            ]"
          />
          <div class="bodyCard-label">{{ t("login.userPass") }}</div>
          <van-field
            v-model="data.password"
            type="password"
            name="password"
            class="dev-field"
            :placeholder="$t('login.passplacehold')"
            :rules="[
              {
                required: true,
                validator: validatorMessage,
                message: $t('login.passplacehold'),
              },
            ]"
          />
        </van-cell-group>
        <div class="password">
          <van-checkbox v-model="checked" type="primary" icon-size="14">{{
            t("login.remerber")
          }}</van-checkbox>
          <span class="password-text" @click="onForget">{{
            t("login.forget")
          }}</span>
        </div>

        <div class="submit">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            @click="onLogin"
          >
            {{ t("login.title") }}
          </van-button>
          <div class="submit-text" @click="onRegister">
            {{ t("login.register") }}
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
// import * as API from "@/api/index.js";
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import { Base64 } from "js-base64";
import { onMounted } from "@vue/runtime-core";
import { login,getUserInfo } from "@/api/user"
const router = useRouter();
const { t } = useI18n();
let checked = ref(false);
const validator = (val) => /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
const validatorMessage = (val) =>
  /^(?![0-9a-zA-Z]+$)[a-zA-Z0-9~!@#$%^&*?_-]{6,12}$/;
const fromRef = ref(null);
const data = reactive({
  email: "",
  password: "",
});
onMounted(async () => {
  sessionStorage.clear("token")
  let email = localStorage.getItem("email");
  sessionStorage.setItem('_token', '')
  localStorage.removeItem("user");
  if (email) {
    data.email = localStorage.getItem("email");
    data.password = Base64.decode(localStorage.getItem("password")); // base64解密
    checked.value = true;
  }
});
async function onLogin() {
  await fromRef.value.validate()
  let ret = await login(data)
  console.log(ret)
  if (ret.code == 200) {
    sessionStorage.setItem('_token', ret.token)
    let res = await getUserInfo().catch(err=>{Toast(err);});
    console.log(res.data)
    localStorage.setItem("user", JSON.stringify(res.data));
    router.push({ path: "/home" });
  }
  if (checked.value) {
    let password = Base64.encode(data.password); // base64加密
    localStorage.setItem("email", data.email);
    localStorage.setItem("password", password);
  } else {
    localStorage.removeItem("email");
    localStorage.removeItem("password");
  }


}
function onRegister() {
  console.log("我注册");
  router.push({ path: "/register" });
}
function onForget() {
  router.push({ path: "/forgatepassword" });
}
</script>
<style scoped lang='less'>
.login {
  height: 100%;
  .head {
    position: relative;
    width: 100%;
    height: 200px;
    text-align: center;
    background: url("@/assets/images/login/bg.png");
    font-size: 16px;
    color: #ffffff;
    line-height: 16px;
    &-title {
      padding-top: 12px;
    }
    &-number {
      font-weight: bold;
    }
    &-back {
      float: left;
      margin-left: 16px;
    }
    &-logo {
      height: 53px;
      position: relative;
      z-index: 999;
      display: block;
      margin: 40px auto 10px;
    }
  }
  .bodyCard {
    position: relative;
    top: -8px;
    background: #ffffff;
    box-shadow: -1px -4px 4px -1px rgba(0, 0, 0, 0.15);
    border-radius: 15px 15px 0px 0px;
    padding: 29px 21px;
    .van-cell.van-cell--borderless.van-field {
      padding-right: 0px;
    }
    .text {
      color: var(--van-primary-color);
      font-size: 21px;
      font-weight: bold;
      line-height: 21px;
    }
    &-label {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: var(--van-primary-color);
      line-height: 14px;
      margin-top: 25px;
    }
    .password {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      &-text {
        color: var(--gary-text-color);
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .submit {
      margin: 20px 84px;
      text-align: center;
      &-text {
        color: var(--van-primary-color);
        text-decoration: underline;
        margin-top: 17px;
        cursor: pointer;
      }
    }
  }
  :deep(.van-icon-success:before) {
    position: relative;
    top: -2px;
  }
}
</style>
